<template>
  <div>
    <!-- 位置显示 -->
    <div class='position'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/update' }">修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:400px;">
      <el-form-item label="旧密码" prop="oldpwd">
        <el-input type="password" v-model="ruleForm.oldpwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newpwd">
        <el-input type="password" v-model="ruleForm.newpwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkpwd">
        <el-input type="password" v-model="ruleForm.checkpwd" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isTrue">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { mapState, mapMutations } from "vuex"
import { SetUserPwd } from '@/api/api'
const PasswordRule = /^[a-zA-Z0-9]{4,16}$/    //密码正则 4到16位（字母，数字）
export default {
  data() {
    const validateOldpwd = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('旧密码不能为空'));
      }
      setTimeout(() => {
        if (value.length < 4) {
          callback(new Error('旧密码长度不能小于4位'));
        } else {
          callback()
        }
      }, 1000);
    }
    const validateNewpwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码输入为空'));
      } else {
        callback();
      }
    }
    const validateCheckpwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newpwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      isTrue: false,//控制按钮的disable属性
      ruleForm: {
        oldpwd: '',
        newpwd: '',
        checkpwd: ''
      },
      rules: {
        oldpwd: [
          { validator: validateOldpwd, trigger: 'blur' }
        ],
        newpwd: [
          { validator: validateNewpwd, trigger: 'blur' }
        ],
        checkpwd: [
          { validator: validateCheckpwd, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState(['userinfo', 'role']),
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (PasswordRule.test(this.ruleForm.newpwd)) {
            this.updatePwd()
          } else {
            this.$message.error('密码必须为4到16位中英文无特殊符号!')
          }
        } else {
          this.$message.error('请您填写正确的信息之后在尝试哦!')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    updatePwd() {
      this.isTrue = true
      let id = this.role === 3 ? this.userinfo.sid : this.userinfo.id
      console.log(id);
      // console.log(id);
      SetUserPwd({ id: id, oldpwd: this.ruleForm.oldpwd, newpwd: this.ruleForm.newpwd }).then((result) => {
        console.log(result);
        if (result.status == 200) {
          this.$message.success(result.msg);
          this.$store.commit('clearUser')
          sessionStorage.clear()
          setTimeout(() => {
            this.$message.error('登录失效,请重新登录!')
            this.$router.push('/')
          }, 500)
        } else {
          this.$message.info(result.msg);
          this.isTrue = false
        }
      })
    },
  }
}
</script>

<style scoped>
.position {
  padding: 10px;
  margin-bottom: 10px;
}
</style>